<template>
  <div>
    <!-- 列表相关区域 -->
    <el-table
      v-loading="loading"
      :data="Data.pageData.list"
      :stripe="true"
      :border="true"
      row-key="idCard"
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        label="姓名"
        prop="name"
        align="center"
      />
      <el-table-column
        label="身份证"
        prop="idCard"
        align="center"
      />
      <el-table-column
        label="更新时间"
        prop="updateTime"
        align="center"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      />
      <el-table-column
        label="功能"
        align="center"
      >
        <template #default="scope">
          <div
            style="
              display: flex;
              flex-direction: column;
            "
          >
            <el-button
              :loading="deleteLoading"
              type="danger"
              @click="deleteHandle(scope.row.idCard)"
            >
              删除此身份证
            </el-button>
            <el-button
              :loading="getUserInfoLoading"
              style="margin: 0"
              @click="getHandle(scope.row.idCard)"
            >
              查询绑定用户
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <userInfo
      :user-info-data="Data.dialog.userData"
      :user-info-visible="Data.dialog.dialogVisible"
      @close="dialogClose()"
    />
  </div>
</template>

<script setup>
import * as api from '@/api/platform/id-card'
import userInfo from './components/userInfo.vue'

const loading = ref(false)
const Data = reactive({
  getPageParams: {
    pageSize: 10,
    pageNum: 1,
    columns: 'createTime',
    orders: 'DESC'
  },
  pageData: {
    pages: 1,
    total: 0,
    list: [
      {
        createTime: '暂无数据',
        updateTime: '暂无数据',
        idCard: '暂无数据',
        name: '暂无数据'
      }
    ]
  },
  dialog: {
    userData: [{}],
    dialogVisible: false
  }
})

onMounted(() => {
  getPage()
})

const getPage = () => {
  loading.value = true
  api.getPage(
    Data.getPageParams
  )
    .then(res => {
      Data.pageData = res
      loading.value = false
    })
    .catch(() => {
      ElMessage.error('获取数据失败')
      loading.value = false
    })
}

const deleteLoading = ref(false)
const deleteHandle = (data) => {
  deleteLoading.value = true
  api.deleteIdCard({
    idCard: data
  })
    .then(() => {
      getPage()
      ElMessage.success('删除成功')
      deleteLoading.value = false
    })
    .catch(() => {
      ElMessage.error('删除失败')
      deleteLoading.value = false
    })
}

const getUserInfoLoading = ref(false)
function getHandle (data) {
  api.getUserInfo({
    idCard: data
  })
    .then((res) => {
      getPage()
      ElMessage.success('查询成功')
      Data.dialog.userData = res
      Data.dialog.dialogVisible = true
      getUserInfoLoading.value = false
    })
    .catch((e) => {
      ElMessage.error('查询失败')
      getUserInfoLoading.value = false
    })
}

function dialogClose () {
  Data.dialog.dialogVisible = false
}

</script>
